<div class="box">
    <div class="box-header">
        <div class="btn-group">
            <a class="btn btn-primary btn-sm {{ $id }}-tree-tools" data-action="expand"
               title="{{ trans('admin.expand') }}">
                <i class="fa fa-plus-square-o"></i>&nbsp;{{ trans('admin.expand') }}
            </a>
            <a class="btn btn-primary btn-sm {{ $id }}-tree-tools" data-action="collapse"
               title="{{ trans('admin.collapse') }}">
                <i class="fa fa-minus-square-o"></i>&nbsp;{{ trans('admin.collapse') }}
            </a>
        </div>

        @if($useSave)
            <div class="btn-group">
                <a class="btn btn-success btn-sm {{ $id }}-save" title="{{ trans('admin.save') }}"><i
                            class="fa fa-save"></i><span class="hidden-xs">&nbsp;{{ trans('admin.save') }}</span></a>
            </div>
        @endif

        @if($useRefresh)
            <div class="btn-group">
                <a class="btn btn-info btn-sm {{ $id }}-refresh" title="{{ trans('admin.refresh') }}"><i
                            class="fa fa-refresh"></i><span class="hidden-xs">&nbsp;{{ trans('admin.refresh') }}</span></a>
            </div>
        @endif

        <div class="btn-group">
            {!! $tools !!}
        </div>

        @if($useCreate)
            <div class="btn-group pull-right">
                <a class="btn btn-success btn-sm" href="{{ url($path) }}/create"><i class="fa fa-plus"></i><span
                            class="hidden-xs">&nbsp;{{ trans('admin.new') }}</span></a>
            </div>
        @endif
    </div>

    <div class="box-body table-responsive no-padding">
        <div class="dd" id="{{ $id }}">
            @if($useQuickSearch)
                <div class="form-group">
                    <input type="text" id="category-search" class="form-control" placeholder="快速搜索...">
                </div>
            @endif
            <ol class="dd-list">
                @each($branchView, $items, 'branch')
            </ol>
        </div>
    </div>
</div>
@if($useQuickSearch)
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const searchInput = document.getElementById('category-search');
            const originalStyles = new Map();

            // 实时搜索（带防抖）
            searchInput.addEventListener('input', debounce(searchCategories, 300));

            // 双击输入框清空搜索
            searchInput.addEventListener('dblclick', function () {
                this.value = '';
                resetSearch();
            });

            // ESC 键清空搜索
            searchInput.addEventListener('keydown', function (e) {
                if (e.key === 'Escape') {
                    this.value = '';
                    resetSearch();
                }
            });

            function searchCategories() {
                const searchTerm = searchInput.value.trim().toLowerCase();
                resetSearchState();

                if (searchTerm === '') return;

                const allItems = document.querySelectorAll('.dd-item');
                allItems.forEach(item => {
                    const itemText = item.textContent.toLowerCase();
                    if (itemText.includes(searchTerm)) {
                        expandParentNodes(item);
                    } else {
                        originalStyles.set(item, item.style.display);
                        item.style.display = 'none';
                    }
                });
            }

            function resetSearch() {
                resetSearchState();
            }

            function resetSearchState() {
                document.querySelectorAll('.dd-item').forEach(item => {
                    if (originalStyles.has(item)) {
                        item.style.display = originalStyles.get(item);
                        originalStyles.delete(item);
                    }
                });
            }

            function expandParentNodes(item) {
                let parent = item.parentElement;
                while (parent && parent.classList.contains('dd-list')) {
                    const parentItem = parent.parentElement;
                    if (parentItem && parentItem.classList.contains('dd-item')) {
                        originalStyles.set(parent, parent.style.display);
                        parent.style.display = '';
                        parent = parentItem.parentElement;
                    } else {
                        break;
                    }
                }
            }

            function debounce(func, wait) {
                let timeout;
                return function () {
                    const context = this;
                    const args = arguments;
                    clearTimeout(timeout);
                    timeout = setTimeout(() => func.apply(context, args), wait);
                };
            }
        });
    </script>
@endif